<template>
    <el-container>
        <el-header style="margin-top: 20px;">
            <h2>电影票房收入可视化分析</h2>
        </el-header>
        <el-main style="margin-top: -20px;">
            <el-card shadow="always" class="code-card">
                <el-scrollbar>
                    <el-row gutter={20}>
                        <el-col :span="10">
                            <el-image style="width: 100%; height: auto; margin-bottom: 20px;"
                                src="src\assets\img\box_office_distribution.png" alt="电影票房收入图"></el-image>
                        </el-col>
                        <el-col :span="14" style="margin-top: 40px;">
                            <p>
                                <strong>分析：</strong>
                                从图中的票房收入分布图可以看到，票房收入呈现右偏分布，少数电影的票房收入异常高，这可能是由大规模的宣传和明星效应等因素推动的。
                                绝大部分电影的票房收入集中在中低区间，可能反映了电影行业的整体情况，即大部分电影的票房收入处于平稳水平，只有少数作品能够获得高票房。这个现象也表明了“少数成功者”的规律。
                                票房收入的分布揭示了电影市场的竞争格局，同时也给制片方和发行商带来了如何在激烈竞争中脱颖而出的思考。
                            </p>
                            <p>
                                <strong>代码展示：</strong>
                            </p>
                            <pre style="background-color: #f4f4f4; padding: 15px; border-radius: 5px;">
<code>
plt.figure(figsize=(10, 6))
sns.histplot(df['number'], bins=20, kde=True, color='green')
plt.title('票房收入的分布')
plt.xlabel('票房收入（百万）')
plt.ylabel('电影数量')
plt.savefig('box_office_distribution.png')  # 保存图像
plt.show()
</code>
                            </pre>
                        </el-col>
                    </el-row>
                </el-scrollbar>
            </el-card>
        </el-main>
        <el-footer>
            <el-alert title="提示：请确保运行环境正确配置。" type="info" show-icon>
            </el-alert>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        name: 'MovieAnalysis'
    }
</script>

<style scoped>
    /* 添加你需要的样式 */
</style>